<template>
  <div id="user-info">
    <user-template>
      <info-table
          ref="info"
          class="info-table"
          @updateInfo="updateInfo"
          @updatePassword="updatePassword"
      />
      <user-edit-form
          ref="edit"
          v-show="isShow"
          :show="show"
          @update="update"
          @cancel="cancel"
      />
    </user-template>
  </div>
</template>

<script>
import InfoTable from "@/components/user/userInfo/InfoTable";
import UserTemplate from "@/components/user/template/UserTemplate";
import UserEditForm from "@/components/user/userInfo/UserEditForm";

import {getUserDetail, updateUser, auth} from "@/network/userRequest";

export default {
  name: "UserInfoEdit",
  components: {
    InfoTable,
    UserTemplate,
    UserEditForm
  },
  data() {
    return {
      isShow: false,
      show: ""
    }
  },
  methods: {
    updateInfo() {
      this.$refs.edit.getUserDetail();
      this.show = "updateInfo";
      this.isShow = true;
    },
    updatePassword() {
      this.$refs.edit.getUserDetail();
      this.show = "updatePassword";
      this.isShow = true;
    },
    update(user) {
      const formData = new FormData();
      formData.append("file", user.avatar);
      user.avatar = null;
      const message = JSON.stringify(user);
      updateUser(message, formData).then( () => {
        this.$refs.info.getUserDetail();
      });
      console.log("hello")
      this.isShow = false;
    },
    cancel() {
      this.isShow = false;
    }
  },
  created() {
    auth();
  }
}
</script>

<style scoped>
  #user-info {
    height: 100%;
  }

  #user-info .info-table {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -179px;
    margin-left: -177px;
  }

</style>